<template>
  <a-modal
    width="90%"
    class="checkmodel"
    centered
    :bodyStyle="{ padding: 0, overflowY: 'auto', height: bodyHeight }"
    :title="title"
    :footer="null"
    destroyOnClose
    v-model="isVisible"
  >
    <a-tabs class="checkmodel-tabs" tab-position="left" :defaultActiveKey="activePane">
      <a-tab-pane class="checkmodel-content" tab="查看详情" key="1">
        <keep-alive>
          <component
            v-model="dataSouces"
            ref="formModel"
            :browseMode="false"
            :editable="false"
            :is="asyncComponent"
            :printModel="printModel"
            :dataId="bizId"
          ></component>
        </keep-alive>
      </a-tab-pane>

      <a-tab-pane forceRender class="checkmodel-content" tab="审批记录" key="2">
        <s-table ref="table" rowKey="key" :columns="columns" :data="loadRecords" :pagination="null"></s-table>
      </a-tab-pane>

      <a-tab-pane forceRender class="checkmodel-content" tab="审批流程" key="3">
        <img :src="processImage" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { axios } from '@/utils/request'
import STable from '@/components/table/'
import { getAction } from '@/api/manage'

export default {
  name:'CheckModel',
  components: {
    STable
  },
  model: {
    prop: 'visible',
    event: 'input'
  },
  props: {
    title: {
      type: String,
      default: '查看'
    },
    printModel: Boolean,
    visible: Boolean,
    bizId: String, //业务ID
    bizComponent: String, //业务组件
  },
  data() {
    return {
      basePath: window._CONFIG['domianURL'],
      editable: false,
      processImage: '',
      activePane: '1',
      dataSouces: {},
      processData: {},
      isVisible: false,
      bodyHeight: '',
      columns: [
        {
          title: '任务名称',
          dataIndex: 'taskName',
          width: 160
        },
        {
          title: '处理人',
          dataIndex: 'dealUserName',
          width: 160
        },
        {
          title: '处理时间',
          dataIndex: 'dealTime',
          width: 180
        },
        {
          title: '审批意见',
          dataIndex: 'opinion',
          width: 260
        },
        {
          title: '审批结果',
          dataIndex: 'result',
          width: 160
        }
      ],
      // 获取流程记录
      loadRecords: parameter => {
        return getAction('/workflow/queryProcessRecordByBizId', {
          bizId: this.bizId
        }).then(res => {
          if (res.success && res.result) {
            let records = res.result.records.map((item, key) => {
              return {
                key: key,
                ...item
              }
            })
            const obj = {
              data: records || [],
              pageNo: res.result.current,
              pageSize: res.result.size,
              totalCount: res.result.total,
              totalPage: res.result.page,
              sortColumns: res.result.sortColumns
            }
            return obj
          } else {
            return {}
          }
        })
      }
    }
  },
  computed: {
    asyncComponent() {
      var detailComponent = ''
      if (this.bizComponent) {
        try {
          detailComponent = () => import(`../../views${this.bizComponent}.vue`)
        } catch (error) {
          console.log(error)
        }
      }
      return detailComponent
    }
    
  },
  watch: {
    visible: {
      handler(nv, ov) {
        this.isVisible = nv
        if (nv) {
          this.loadData()
        } else {
          this.processData = {}
          this.currentWorkflow = 0
        }
      },
      immediate: true
    },
    isVisible(nv, ov) {
      this.$emit('input', nv)
    },
    bizId(nv, ov) {
      this.getProcessImage()
    }
  },
  beforeMount() {
    this.bodyHeight = document.body.offsetHeight - 100 + 'px'
  },
  methods: {
    loadData() {
      getAction('',{
        id:this.bizId
      })
    },
    /**
     * 获取流程图
     */
    getProcessImage() {
      axios
        .get('/workflow/showProcessImageByBizId', {
          params: {
            bizId: this.bizId
          },
          responseType: 'blob'
        })
        .then(data => {
          this.processImage = URL.createObjectURL(data)
        })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.isVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.checkmodel {
  .checkmodel-tabs {
    height: 100%;
    display: flex;
  }
  .checkmodel-content {
    padding: 0;
    // position:absolute;
    // min-height: 100%;
    img{
      width: 80%;
    }
  }
  /deep/.ant-tabs-left-content {
    position: relative;
    flex: 1;
    padding: 20px !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: auto;
  }
}
</style>
